import React, {Component} from 'react';
import ApiDataTb from './ApiDataTb';
import ApiDataMobileTb from './ApiDataMobileTb';
//加入响应式布局
import { enquireScreen } from 'enquire-js';
import MarkDown from '../../../components/MarkDown';

/**
 * method 注释说明
 *
 * @author zhangby
 * @date 2018/6/13 下午4:59
 */
export default class MethodInfoTb extends Component{
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [
                {
                    param:"text",
                    remark:"method注释文字<code>方法功能说明</code>",
                    isBlack:"可为空",
                    default:"",
                    eg:"用户登录功能",
                },
                {
                    param:"@title",
                    remark:"方法标题<code>menu子菜单标题</code>",
                    isBlack:"不能为空",
                    default:"方法名",
                    eg:"登录接口",
                },
                {
                    param:"@param ",
                    remark:`
                        method入参<code>接口入参</code><br><br>
                        <strong>如：</strong>username|用户名|string|必填<br><br>
                        <em>
                            参数一：参数名<br>
                            参数二：描述<br>
                            参数三：参数类型<br>
                            参数四：是否必填<br>
                        </em><br>
                        可接收多个参数。<br><br>
                        <strong>注：</strong>如果入参为对象时可进行如下设置<br>
                        <em>
                            @param user|用户对象|object|必填<br>
                            @param user.name|用户名|string|必填<br>
                            @param user.password|密码|string|必填<br>
                        </em>
                    `,
                    isBlack:"可为空",
                    default:"",
                    eg:"@param username|用户名|string|必填",
                },
                {
                    param:"@resqParam",
                    remark:`
                        method出参<code>接口出参</code><br><br>
                        <strong>如：</strong>msg|消息信息|String|必填<br><br>
                        <em>
                            参数一：参数名<br>
                            参数二：描述<br>
                            参数三：参数类型<br>
                            参数四：是否必填<br>
                        </em><br>
                        可接收多个参数。<br><br>
                        <strong>注：</strong>如果入参为对象时可进行如下设置<br>
                        <em>
                            @param user|用户对象|object|必填<br>
                            @param user.name|用户名|string|必填<br>
                            @param user.password|密码|string|必填<br>
                        </em>
                    `,
                    isBlack:"可为空",
                    default:"",
                    eg:"@resqParam username|用户名|string|必填",
                },
                {
                    param:"@respBody",
                    remark:"返回参数示例，<code>json字符串</code>",
                    isBlack:"可为空",
                    default:"",
                    eg:'{<br>"code":"000",<br>"data":"",<br>"msg":"success"<br>}',
                },
                {
                    param:"@requestType",
                    remark:"接口请求类型，默认：<code>post</code>",
                    isBlack:"可为空",
                    default:"post",
                    eg:"@requestType get,post",
                },
                {
                    param:"@author",
                    remark:"方法作者最好设置必填，便于后期维护",
                    isBlack:"可为空",
                    default:"不能为空",
                    eg:"@author zhangby",
                },
                {
                    param:"@date",
                    remark:"创建时间",
                    isBlack:"可为空",
                    default:"",
                    eg:"2018/6/12 下午3:26",
                },
            ],
            mobileDataSource:`
| 参数 | 说明 | 可否为空 | 默认值 | 样例 |
| - | :-: | :-: | :-: | -: | 
| text | 方法功能说明 | true |  | 用户登录功能 |
| @title | menu子菜单标题 | false | 方法名 | 登录接口 |
| @param | 接口入参 | true |  | @param ... |
| @resqParam | 接口出参 | true |  | @resqParam ... |
| @respBody | 返回参数示例 | true |  | {} |
| @requestType | 接口请求类型 | true | post | |
| @author | 创建者 | true |  | @author zhangby |
| @date | 创建时间 | true |  | 2018/6/12 下午3:26 |

`, isMobile: false
        };

    }

    componentDidMount() {
        this.enquireScreenRegister();
    }

    enquireScreenRegister = () => {
        const mediaCondition = 'only screen and (max-width: 720px)';

        enquireScreen((mobile) => {
            this.setState({
                isMobile: mobile,
            });
        }, mediaCondition);
    };

    render(){
        // 根据当前状态做显示隐藏
        const { isMobile } = this.state;
        return(
            <div>
                {isMobile?<MarkDown source={this.state.mobileDataSource}/>:
                    <ApiDataTb dataSource={this.state.dataSource} />}
            </div>
        )
    }
}